<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基本案例</text>
         <text class="uv-block__title">苹果、香蕉和橙子哪个最甜？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__checkbox-item">
               <uv-checkbox-group
                  v-model="checkboxValue1"
                  placement="column"
                  @change="checkboxChange"
               >
                  <uv-checkbox
                     :customStyle="{ marginBottom: '8px' }"
                     v-for="(item, index) in checkboxList1"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-checkbox>
               </uv-checkbox-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义形状</text>
         <text class="uv-block__title">中国四大名著是？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__checkbox-item">
               <uv-checkbox-group
                  v-model="checkboxValue2"
                  placement="column"
                  @change="checkboxChange"
                  shape="circle"
               >
                  <uv-checkbox
                     v-for="(item, index) in checkboxList2"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-checkbox>
               </uv-checkbox-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">是否禁用</text>
         <text class="uv-block__title">下面什么东西不能吃？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__checkbox-item">
               <uv-checkbox-group
                  v-model="checkboxValue3"
                  placement="column"
                  @change="checkboxChange"
               >
                  <uv-checkbox
                     v-for="(item, index) in checkboxList3"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                     :disabled="index === 0"
                  >
                  </uv-checkbox>
               </uv-checkbox-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">是否禁止点击提示语选中复选框</text>
         <text class="uv-block__title">北宋四大家是谁？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__checkbox-item">
               <uv-checkbox-group
                  v-model="checkboxValue4"
                  placement="column"
                  @change="checkboxChange"
                  :labelDisabled="true"
               >
                  <uv-checkbox
                     v-for="(item, index) in checkboxList4"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-checkbox>
               </uv-checkbox-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义颜色</text>
         <text class="uv-block__title">哪个颜色最好看？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__checkbox-item">
               <uv-checkbox-group
                  v-model="checkboxValue5"
                  placement="column"
                  @change="checkboxChange"
                  shape="card"
               >
                  <uv-checkbox
                     v-for="(item, index) in checkboxList5"
                     :key="index"
                     :activeColor="item.color"
                     :label="item.name"
                     :name="item.name"
                     :disabled="item.disabled"
                  >
                  </uv-checkbox>
               </uv-checkbox-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">横向排列形式</text>
         <text class="uv-block__title">什么东西不能飞？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__checkbox-item">
               <uv-checkbox-group v-model="checkboxValue6" @change="checkboxChange">
                  <uv-checkbox
                     v-for="(item, index) in checkboxList6"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-checkbox>
               </uv-checkbox-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">横向两端排列形式</text>
         <text class="uv-block__title">什么东西不能吃？</text>
         <view>
            <view class="uv-page__checkbox-item">
               <uv-checkbox-group
                  v-model="checkboxValue7"
                  @change="checkboxChange"
                  :borderBottom="true"
                  placement="column"
                  iconPlacement="right"
               >
                  <uv-checkbox
                     v-for="(item, index) in checkboxList7"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-checkbox>
               </uv-checkbox-group>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const checkboxValue1 = ref(['苹果', '橙子']);
const checkboxList1 = ref([
   {
      name: '苹果',
      disabled: false,
   },
   {
      name: '香蕉',
      disabled: false,
   },
   {
      name: '橙子',
      disabled: false,
   },
]);

const checkboxValue2 = ref(['西游记', '红楼梦', '三国演义', '水浒传']);
const checkboxList2 = ref([
   {
      name: '西游记',
      disabled: false,
   },
   {
      name: '红楼梦',
      disabled: false,
   },
   {
      name: '三国演义',
      disabled: false,
   },
   {
      name: '水浒传',
      disabled: false,
   },
]);

const checkboxValue3 = ref(['傻瓜']);
const checkboxList3 = ref([
   {
      name: '冬瓜',
      disabled: false,
   },
   {
      name: '西瓜',
      disabled: false,
   },
   {
      name: '黄瓜',
      disabled: false,
   },
   {
      name: '傻瓜',
      disabled: false,
   },
]);

const checkboxValue4 = ref(['黄庭坚', '欧阳修', '王安石']);
const checkboxList4 = ref([
   {
      name: '黄庭坚',
      disabled: false,
   },
   {
      name: '欧阳修',
      disabled: false,
   },
   {
      name: '苏小宝',
      disabled: false,
   },
   {
      name: '王安石',
      disabled: false,
   },
]);

const checkboxValue5 = ref(['红色']);
const checkboxList5 = ref([
   {
      name: '红色',
      disabled: true,
      color: '#f56c6c',
   },
   {
      name: '黄色',
      disabled: false,
      color: '#f9ae3d',
   },
   {
      name: '绿色',
      disabled: false,
      color: '#5ac725',
   },
   {
      name: '蓝色',
      disabled: false,
      color: '#3c9cff',
   },
]);

const checkboxValue6 = ref(['游艇', '轮船']);
const checkboxList6 = ref([
   {
      name: '小鸟',
      disabled: false,
   },
   {
      name: '游艇',
      disabled: false,
   },
   {
      name: '轮船',
      disabled: false,
   },
   {
      name: '飞机',
      disabled: false,
   },
   {
      name: '骑车',
      disabled: false,
   },
   {
      name: '汽车',
      disabled: false,
   },
   {
      name: '火箭',
      disabled: false,
   },
]);

const checkboxValue7 = ref(['汽车', '蒸汽机']);
const checkboxList7 = ref([
   {
      name: '汽车',
      disabled: false,
   },
   {
      name: '蒸汽机',
      disabled: false,
   },
   {
      name: '猪肉',
      disabled: false,
   },
   {
      name: '抄手',
      disabled: false,
   },
]);

const checkboxChange = (e: any) => {
   console.log(e);
};
</script>

<style lang="scss" scoped></style>
